<template>
    <div class="app-page">
        <div class="nav">
            <page-header :log-out-fun="logOutFun" :height="headerHeight" :head-data="headData"></page-header>
        </div>
        <div class="page-body">
            <router-view/>
        </div>
    </div>
</template>

<script>
    import {onMounted, reactive, toRefs} from "vue";

    import AntMenu from "@/components/arcgismap/AntMenu"
    import PageHeader from '@/components/common/PageHeader'

    export default {
        components: {AntMenu, PageHeader},
        setup() {
            onMounted(() => {
                console.log('Home finished onMounted!!');
            });

            const data = reactive({
                logOutFun: () => {
                    console.log('homePage logOut')
                },
                headData: [                                       
                    {
                        content: '土地类型',
                        name: 'PMapView'
                    },
                    {
                        content: 'FeatureCluster',
                        name: 'PFeatureCluster'
                    },
                    {
                        content: '三维地图',
                        name: 'PEsriMap'
                    }
                ],
                headerHeight: 50,
            });

            return {
                ...toRefs(data)
            }
        }
    };
</script>

<style lang="scss">
    .app-page {
        .page-body {
            position: absolute;
            top: 70px;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: auto;
            background: rgb(2, 58, 53);
        }
    }
</style>
